<template>
    <div>
        <Header></Header>
        <div class="block">
            <el-timeline>
                <el-timeline-item :timestamp="log.created" placement="top" v-bind:key="log.id" v-for="log in blogs" >
                    <el-card>
                        <h4>
                            <router-link  :to="{name:'BlogDetail',params :{blogId:log.id}}">
                            {{log.title}}
                            </router-link>
                        </h4>
                        <p>{{log.description}}</p>
                    </el-card>
                </el-timeline-item>
            </el-timeline>
            <el-pagination class="mpage"
                    background
                    layout="prev, pager, next"
                           :current-page="currentPage"
                           :page-size="pageSize"
                    :total="total"
                    @current-chenge=page>
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import Header from '../components/Header'
    export default {
        name: "Blogs",
        components: {Header},
        comments:{Header},
        data(){
            return{
                blogs:{},
                currentPage:1,
                total:0,
                pageSize:5
            }
        },
        methods:{
            page(currentPage){
                const _this = this;
                _this.$axios.get("/blog/list?currentPage="+currentPage).then(res=>{
                    //console.log(res.data.data.data)
                    _this.blogs = res.data.data.data;
                    _this.currentPage = res.data.data.pageNo;
                    _this.total = res.data.data.total;
                    _this.pageSize = res.data.data.pageSize;
                })
            }
        },
        created(){
            this.page(1);
        }
    }
</script>

<style scoped>
    .mpage{
        margin: 0 auto;
        text-align: center;
    }
</style>